import React, { useEffect, useState } from "react";
import { Button, Popconfirm, Tooltip } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import editIcon from "./edit.png"
import { imageLibraryApi as api } from "@/api";
import style from "./src/styles/index.module.scss"
import antdIcon from "@/assets/antdIcon";




const IconBedComponent = ({ onSelect, state }) => {
    const [active, setActive] = useState("antd");
    const antdIconList = (() => {
        let list = [];
        for (let key in antdIcon({ style: {} }).antdIcons) {
            list.push({
                type: "antd",
                url: key,
                element: antdIcon({ style: {} }).getIcon(key),
            })
        }
        return list;
    }
    )()






    return (
        <div className={style.modalContent}>
            <div className="header">
                <span className="title">图标库<Tooltip title="可以素材管理>图库>图标库中添加图标"><QuestionCircleOutlined /></Tooltip></span>
            </div>
            <div className="tabs">
                <span className="tab-item">
                    <span className={`tab-item-inner ${active === "antd" ? "active" : ""}`} onClick={() => setActive("antd")}>Ant图标</span>
                </span>
                <span className="tab-item">
                    <span className={`tab-item-inner ${active === "online" ? "active" : ""}`} onClick={() => setActive("online")}>在线图标</span>
                </span>
            </div>
            {
                active === "antd" && <div className="center">
                    {

                        antdIconList.map((item, key) => (
                            <span key={key} className="icon" onClick={() => onSelect(item.url)}>
                                {item.element}
                            </span>
                        ))
                    }
                </div>

            }
            {
                active === "online" && <div className="center">
                    {
                        state.data.map((item, key) => (
                            <span key={key} className="icon" onClick={() => onSelect(item.url)}>
                                <img src={item.url} alt="#" className="img" />
                            </span>
                        ))
                    }
                </div>
            }

        </div>
    )
};







/**
 * 
 * @returns 
 * @description 图标床的组件。弹出一个图标床的界面。
 */
export default function XxIconBedInput({ onChange, value, }) {
    const [img, setImg] = useState(value);
    const onSelect = (selectedVal) => {
        onChange && onChange(selectedVal);
        setImg(selectedVal);
    }
    const [nextTokens, setNextTokens] = useState([]);
    const [state, setState] = useState({
        data: [],
        dirTree: [{
            children: []
        }],
        totalCount: 0,
        nextContinuationToken: null,
        isTruncated: false,//是否还有更多？
    })

    useEffect(() => {
        value && setImg(value)
    }, [value])

    const getList = async ({ pageSize, prefix, currentToken = null } = params) => {

        const { data, code, msg } = await api.queryList({
            pageSize: pageSize,
            prefix: prefix,
            nextContinuationToken: currentToken,
        });
        setState({
            isTruncated: data.isTruncated,
            data: [...data.list],
            totalCount: data.totalCount || 0,
            nextContinuationToken: data.nextContinuationToken || null,
        })

        // 如果还有下一页，则将下一个分页标记加入到pageTokens中，以便下一次加载更多数据
        setNextTokens([...nextTokens, data.nextContinuationToken || null]);

    }

    useEffect(() => {
        getList({
            pageSize: 100,
            prefix: "images/菜单图标库/",
            currentToken: null,
        })
    }, [])

    return (
        <div className={style.style}>

            <Tooltip
                title={<IconBedComponent state={state} onSelect={onSelect} />}
                trigger="click"
            >
                <div className="show-icon">
                    {/* <img src={img} alt="#" className="img" /> */}
                    {
                        antdIcon({ style: { fontSize: '24px' } }).getIcon(img)

                        // antdIcon({ img: img, style: { fontSize: '24px' } })
                    }
                </div>
            </Tooltip>

        </div>
    );
}